<template>
    <div class="box">
      <input type="text" v-model="name">
      <h1>子组件</h1>
    </div>
  </template>
  
  <script>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"
  export default {
    setup(){
        let name = ref("fd");
        console.log("setup执行");


        //-----------setup定义生命周期-------------------------
        //实例还没有创建，setup中没有beforeCreate ，created这两个生命周期，都是用的setup代替
        //setup里面的生命钩子函数没有this
        onBeforeMount(()=>{
            console.log("onBeforeMount",this);
        });
        //setup里面的生命钩子函数可以重复，不会覆盖
        onMounted(()=>{
            console.log("onMount",this);
        });
        onMounted(()=>{
            console.log("onMount1111111",this);
        });
        onBeforeUpdate(()=>{
            console.log("onBeforeUpdate",this);
        });
        onUpdated(()=>{
            console.log("onUpdate",this);
        });
        onBeforeUnmount(()=>{
            console.log("onBeforeUnmounted",this);
        })
        onUnmounted(()=>{
            console.log("onUnmounted",this);
        })
    



        return {name}


    },
    // beforeCreate(){
    //     console.log("创建之前",this);
    // },
    // created(){
    //     console.log("创建完成",this);
    // },
    // beforeMount(){
    //     console.log("挂载之前",this);
    // },
    // // 生命周期重复，后面的会覆盖前面的
    mounted(){
        console.log("挂载完成",this);
    },
    // mounted(){
    //     console.log("挂载完成11111111111",this);
    // },
    // beforeUpdate(){
    //     console.log("更新之前",this);
    // },
    // updated(){
    //     console.log("更新完成",this);
    // },
    // beforeUnmount(){
    //     console.log("销毁之前",this);
    // },
    // unmounted(){
    //     console.log("销毁完成",this);
    // }
  }
  </script>
  
  <style>
  
  </style>